<template>
  <div style="min-height: 350px;">
    <p style="margin: 10px 0">
      请上传身份证正面(国徽面)
    </p>
    <div v-show="!hideShow1" style="width: 178px; height: 178px;display: block;"
         class="el-upload-list el-upload-list--picture-card" >
      <div class="el-upload-list__item" style="width: 178px; height: 178px">
        <img  class="avatar" :src="imageUrl1">
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"/>
        </label>
        <span class="el-upload-list__item-actions">
                  <span @click="handlePreview1()">
                    <i class="el-icon-zoom-in"/>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i class="el-icon-delete" @click.stop="handleRemove1()"/>
                  </span>
                </span>
      </div>
    </div>
    <el-upload
        v-show="hideShow1"
        class="avatar-uploader"
        action="http://localhost:19090/admin/upload-picture"
        name="picFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess1"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible1">
      <img width="100%" :src="dialogImageUrl1" alt="">
    </el-dialog>
    <p style="margin: 10px 0">
      请上传身份证反面(人头面)
    </p>
    <div v-show="!hideShow2" style="width: 178px; height: 178px;display: block;"
         class="el-upload-list el-upload-list--picture-card" >
      <div class="el-upload-list__item" style="width: 178px; height: 178px">
        <img  class="avatar" :src="imageUrl2">
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"/>
        </label>
        <span class="el-upload-list__item-actions">
                  <span @click="handlePreview2()">
                    <i class="el-icon-zoom-in"/>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i class="el-icon-delete" @click.stop="handleRemove2()"/>
                  </span>
                </span>
      </div>
    </div>
    <el-upload
        v-show="hideShow2"
        class="avatar-uploader"
        action="http://localhost:19090/admin/upload-picture"
        name="picFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess2"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible2">
      <img width="100%" :src="dialogImageUrl2" alt="">
    </el-dialog>
    <p style="margin: 10px 0">
      请上传工作证
    </p>
    <div v-show="!hideShow" style="width: 178px; height: 178px;display: block;"
         class="el-upload-list el-upload-list--picture-card" >
      <div class="el-upload-list__item" style="width: 178px; height: 178px">
        <img  class="avatar" :src="imageUrl">
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"/>
        </label>
        <span class="el-upload-list__item-actions">
                  <span @click="handlePreview()">
                    <i class="el-icon-zoom-in"/>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i class="el-icon-delete" @click.stop="handleRemove()"/>
                  </span>
                </span>
      </div>
    </div>
    <el-upload
        v-show="hideShow"
        class="avatar-uploader"
        action="http://localhost:19090/admin/upload-picture"
        name="picFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-button type="primary" @click="save()">提交</el-button>
  </div>

</template>
<script>
export default {
  data() {
    return {
      userId: 2,
      activeName: 'myResponse',
      replyToMe: [

      ],
      imageUrl1: '',
      hideShow1: true,
      dialogImageUrl1: '',
      dialogVisible1: false,

      imageUrl2: '',
      hideShow2: true,
      dialogImageUrl2: '',
      dialogVisible2: false,

      imageUrl: '',
      hideShow: true,
      dialogImageUrl: '',
      dialogVisible: false,

      review:{

      },

    };
  },
  methods: {
    save(){
      if (this.imageUrl == '' || this.imageUrl1 == '' || this.imageUrl2 == '') {
        this.$message.error("请添加图片!");
      } else {
        this.axios.get("/authentication/insert-authentication", {
          params:this.review
        }).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success(data.message);
            location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
          } else {
            this.$message.error(data.message);
          }


        });
      }
    },
    handleRemove1() {
      this.axios.get("/user/remove-picture?pictureName=" + this.imageUrl1).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
        } else {
          this.$message.error(data.message);
        }
      });
      this.hideShow1 = !this.hideShow1;
      this.imageUrl1 = '';

    },
    handlePreview1() {
      this.dialogImageUrl1 = this.imageUrl1;
      this.dialogVisible1 = true;
    },
    handleAvatarSuccess1(res, file) {
      console.log("res:" + res.data)
      this.imageUrl1 = res.data;
      this.review.idCardFront = this.imageUrl1;
      this.hideShow1 = false;

    },

    handleRemove2() {
      this.axios.get("/user/remove-picture?pictureName=" + this.imageUrl2).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
        } else {
          this.$message.error(data.message);
        }
      });
      this.hideShow2 = !this.hideShow2;
      this.imageUrl2 = '';

    },
    handlePreview2() {
      this.dialogImageUrl2 = this.imageUrl2;
      this.dialogVisible2 = true;
    },
    handleAvatarSuccess2(res, file) {
      console.log("res:" + res.data)
      this.imageUrl2 = res.data;
      this.review.idCardBack = this.imageUrl2;
      this.hideShow2 = false;

    },

    handleRemove() {
      this.axios.get("/user/remove-picture?pictureName=" + this.imageUrl).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
        } else {
          this.$message.error(data.message);
        }
      });
      this.hideShow = !this.hideShow;
      this.imageUrl = '';

    },
    handlePreview() {
      this.dialogImageUrl = this.imageUrl;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      console.log("res:" + res.data)
      this.imageUrl = res.data;
      this.review.workCard = this.imageUrl;
      this.hideShow = false;

    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === "image/png";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }

      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },

  },
  created() {

  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
